<template>
  <div class="login-page">
    <nav-bar theme="black"></nav-bar>
    <div class="login-main page-main" style="margin-top: 44px">
      <div class="login-title">
        <p>忘记密码</p>
      </div>
      <van-form validate-trigger="onSubmit" :show-error="false" @submit="onSubmit">
        <van-field
          size="large"
          type="password"
          v-model="formParams.newPassWord"
          placeholder="请输入新密码"
          :rules="rules.newPassWord"
        />
        <van-field
          size="large"
          type="password"
          v-model="formParams.verifyPassWord"
          placeholder="再次输入新密码"
          :rules="rules.verifyPassWord"
        />
        <div style="margin: 16px">
          <van-button
            block
            type="info"
            native-type="submit"
            size="large"
            :loading="button.loading"
            :disabled="button.disabled"
          >
            {{ button.text }}
          </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>
<script>
import Login from '@/api/login'
import { passWordReg } from '@/libs/regexp'
export default {
  data() {
    const verifyPassWordValidator = () => {
      return this.formParams.verifyPassWord === this.formParams.newPassWord
    }
    return {
      formParams: {
        loginName: this.$route.params.loginName,
        validateCode: this.$route.params.validateCode,
        newPassWord: '',
        verifyPassWord: ''
      },
      rules: {
        newPassWord: [
          { required: true, message: '请输入密码' },
          { pattern: passWordReg, message: '请输入6-10位的字母与数字组合' }
        ],
        verifyPassWord: [
          { required: true, message: '请再次输入密码' },
          { validator: verifyPassWordValidator, message: '密码不一致' }
        ]
      },
      button: {
        disabled: false,
        loading: false,
        text: '提交'
      }
    }
  },
  created() {
    if (!Object.keys(this.$route.params).length) this.$router.go(-1)
  },
  methods: {
    onSubmit() {
      this.button.disabled = true
      this.button.loading = true
      this.button.text = '提交中...'
      Login.Password.updatePassword(this.formParams)
        .then(res => {
          this.button.disabled = false
          this.button.loading = false
          this.button.text = '提交'
          const { status } = res.data
          if (status === 0) {
            this.$router.push('/login/password/message')
          } else {
            this.$toast.fail(res.data.message)
          }
        })
        .catch(() => {
          this.button.disabled = false
          this.button.loading = false
          this.button.text = '提交'
        })
    }
  }
}
</script>
<style scoped lang="less">
@import '~@/assets/style/login/index.less';
</style>
